<template>
  <div>
    <tb-report
      :columns="columns"
      :apiUrl="apiUrl"
      :tableData="tableData"
      :getData="getData"
    ></tb-report>
  </div>
</template>

<script>
import TbReport from "@/components/tb-report/index.vue";

export default {
  name: "App",
  components: { TbReport },
  data() {
    return {
      title: "首页",
      apiUrl:"/scm/api/v1/scmPurchaseContractList/list",
      columns:[
      { type: 'seq', key: 'seq', width: 50, title: '序号',  fixed: 'left' },
    {
      key: 'loadVesselNumber',
      title: '配载船次',
      field: 'loadVesselNumber',
      width: 200,
    },
    { key: 'vesselNameCn', title: '中文船名', field: 'vesselNameCn', width: 120 },
    { key: 'vesselNameEn', title: '英文船名', field: 'vesselNameEn', width: 120 },
    { key: 'voyageNo', title: '航次号', field: 'voyageNo', width: 120 },
    { key: 'materialName', title: '物资名称', field: 'materialName', width: 120 },
    { key: 'shipDynamic', title: '船舶动态', field: 'shipDynamic', width: 120 },
    { key: 'leaseContractNo', title: '租船合同号', field: 'leaseContractNo', width: 120 },
    {
      key: 'shipowner',
      title: '船东名称',
      field: 'shipowner',
      width: 120,
    },
    {
      key: 'exportCorp',
      title: '出口公司',
      field: 'exportCorp',
      width: 120,
    },
    { key: 'headOfAoyama', title: '青山负责人', field: 'headOfAoyama', width: 120 },
    {
      key: 'effectiveDateOfContract',
      title: '合同生效日期',
      field: 'effectiveDateOfContract',
      width: 120,
    },
    { key: 'grossWeight', title: '毛重kg', field: 'grossWeight', width: 120 },
    { key: 'volume', title: '体积m³', field: 'volume', width: 120 },
    {
      key: 'wharf',
      title: '集港码头',
      field: 'wharf',
      width: 120,
    },
    {
      key: 'planPortGatherDate',
      title: '计划集港日期',
      field: 'planPortGatherDate',
      width: 120,
    },
    {
      key: 'loadDeadline',
      title: '截止配载时间',
      field: 'loadDeadline',
      width: 120,
    },
    {
      key: 'berthingTime',
      title: '靠泊时间',
      field: 'berthingTime',
      width: 120,
    },
    {
      key: 'departureTime',
      title: '离港时间',
      field: 'departureTime',
      width: 120,
    },
    {
      key: 'etaInIndonesia',
      title: '印尼ETA',
      field: 'etaInIndonesia',
      width: 120,
    },
    { key: 'remark', title: '备注', field: 'remark', width: 120 },
      ],
      tableData:[]
    };
  },
  methods:{
    getData(data){
      data = data.map((item,index)=>{
                return {
                  ...item,
                  ...item.contractHead,
                  ...item.demand, 
                }
              })
           if (this.tableData.length == 0) {
            this.tableData = data;
           } else {
            this.tableData = [...this.tableData, ...data];
          }
    }
  }
};
</script>

<style>
</style>
